<template>
    <div class="artists">
        <ul class="list">
          <router-link tag="li" v-for="(item, index) in singersData" :key="index" :to="{ name:'songDetails', params: {avatar: item.avatar_s500, name:item.name, ting_uid: item.ting_uid }}" class="artist" >
            <div class="pic">
              <img :src="item.avatar_s500" :alt="item.name">
            </div>
            <div class="info">
              <div>{{ item.name }}</div>
            </div>
          </router-link>
        </ul>
      </div>
</template>

<script>
export default {
  name: 'singer',
  data() {
    return {
      singersArr: ["2517","7994","1091","45561","2507","245815","10177","1204","1117","82366"],
      singersData: []
    }
  },
  mounted() {
    for(var i = 0; i < this.singersArr.length; i++) {
    const singerUrl ='baidu_music_api/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid=' + this.singersArr[i]
      this.$axios.get(singerUrl)
    .then(res => {
      this.singersData.push({
        avatar_s500: res.data.avatar_s500,
        name: res.data.name,
        ting_uid: res.data.ting_uid
      })
    })
    .catch(err => {
      console.log('请求失败' + err)
      })
    }
  }
}
</script>

<style scoped>

</style>
